{% extends 'html/sidebar.html' %}

{% block pageTitle %}
    <title>Store</title>
{% endblock pageTitle %}

{% block style %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/store.css" />
{% endblock style %}

{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{{STATIC_URL}}js/store.js" /></script>
{% endblock script%}

{% block content %}
    {{ block.super }}
    {% comment %}This is the page for the store.{% endcomment %}

    {% if error %}<div id='error'></div>{% endif %}

    <div id="storeOuter">
         <div>Welcome to the {{ store.templateStore.name }}. 
            Choose what you would like to purchase below.</div>
            
            <div id="shopperInfo">
                Funds: <span id='shopperFunds'>{{ money }}</span>
                Weight Limit: <span id='shopperWeightLimit'>{{partyWeightCap}}</span>
            </div>
        <form name="buy" id='buyItems' method="post" onsubmit="return submitPurchases();" action="{% url travel_game.views.buyItems %}">    
            <table id='itemTable'>
                 <tr> 
                     <th>Items</th> 
                     <th>Cost</th> 
                     <th>Weight</th> 
                     <th>Quantity</th> 
                     <th>How many you want to buy</th>
                     <th>Cost x Quantity</th>
                     <th>Weight x Quantity</th>
                     <td rowspan="{{ numItems }}" style="border:none" id="descriptionColumn"></td>
                 </tr>
                {% for item in storeItems %}
                    <tr class="itemRow" title="{{item.itemType.description}}">
                        <td class="name">{{item.itemType.name}}<div style="display:none" class="image"><img src="{{ item.itemType.image.url }}" alt="{{ item.itemType.description }}" title="{{ item.itemType.description }}"></img></div></td>
                        <td class="cost">{{item.itemType.cost}}</td>
                        <td class="weight">{{item.itemType.weight}}</td>
                        <td class="quantity">{{item.quantity}}</td>
                        <td class="amountToBuy"><input type="text" id="{{item.itemType.id}}" name="{{item.itemType.id}}" value='0'></input></td>
                        <td class="costTotal"></td>
                        <td class="weightTotal"></td>
                    </tr>
                {% endfor %}       
                <tr> 
                     <td colspan="5">Totals</td> 
                     <td id="sumCost" class="costTotal">0</td> 
                     <td id="sumWeight" class="weightTotal">0</td> 
                 </tr>         
            </table>    
            <div id="putImageHere"></div>  
            <button id="submitStore" class="button" type="submit">Purchase & Leave Store</button>{% csrf_token %}
        </form>
    </div>
{% endblock content %}

    
    
  
    
    
